<template>
    <div class="regWrap">
        <div class="regInner">
            <p class="regTxt">欢迎注册新账户！</p>
            <!--表单数据 start-->
            <div class="inpCol userName">
                <div class="icon">
                    <img src="../assets/img/userName_icon.png">
                </div>
                <input type="text" placeholder="创建一个账户名" v-model="username">
            </div>

            <div class="inpCol userPass" :class="{'err':errorPass}">
                <div class="icon">
                    <img src="../assets/img/userPass_icon.png" v-show="!errorPass">
                    <img src="../assets/img/errorInfo.png" v-show="errorPass">
                </div>
                <input type="password" :placeholder="errorPass?'两次密码输入不一致，请重新输入':'请输入密码'" v-model="password">
            </div>

            <div class="inpCol userPass" :class="{'err':errorPass}">
                <div class="icon">
                    <img src="../assets/img/userPass_icon.png" v-show="!errorPass">
                    <img src="../assets/img/errorInfo.png" v-show="errorPass">
                </div>
                <input type="password" :placeholder="errorPass?'两次密码输入不一致，请重新输入':'请再次输入密码'" v-model="passwordAgain">
            </div>
            <!--表单数据 end-->

            <!--验证码 start-->
            <div class="vCode">
                <div class="inp"><input type="text" placeholder="验证码" v-model="vCode"></div>
                <div class="vCodeImage">
                    <img :src="src" @click="changeVcode">
                </div>
            </div>
            <!--验证码 end-->
            <div class="loginBtn" @click="registerSubmit">注册</div>

        </div>
    </div>
</template>

<script>
    import {Toast} from 'vant';
    import Url from "../untils/configUrl";
    import {post} from "../untils/https"

    export default {
        data() {
            return {
                src: null,
                errorPass: false,
                username: null,
                password: null,
                passwordAgain: null,
                vCode: null,
                randomStr: ""
            }
        },
        methods: {
            registerSubmit() {
                if (!this.username) {
                    Toast({
                        duration: 2000,
                        message: '请输入账号！',
                    });
                    return
                }
                if (!this.password) {
                    Toast({
                        duration: 2000,
                        message: '请输入密码！',
                        onClose: function () {
                        }
                    });
                    return
                }
                if (!this.passwordAgain) {
                    Toast({
                        duration: 2000,
                        message: '请再次输入密码！',
                        onClose: function () {
                        }
                    });
                    return
                }
                if (!this.vCode) {
                    Toast({
                        duration: 2000,
                        message: '请输入验证码！',
                        onClose: function () {
                        }
                    });
                    return
                }
                Toast.loading({
                    mask: true,
                    message: '加载中...',
                    duration:0
                });
                post(Url.urlConfig.register, {
                    username: this.username,
                    password: this.password,
                    confirmPassword: this.passwordAgain,
                    codeToken: this.randomStr,
                    code: this.vCode
                }).then((data) => {
                    Toast.clear();
                    if (data.code === 200) {
                        Toast.success('注册成功！');
                        setTimeout(()=>{
                            this.$router.push("/")
                        },1000)
                    }
                },()=>{
                    Toast.clear();
                })

            },
            changeVcode() {
                this.requestCode();
            },
            //生成32位置随机唯一数
            randomString(len) {
                len = len || 32;
                let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
                let maxPos = $chars.length;
                let pwd = '';
                for (let i = 0; i < len; i++) {
                    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
                }
                return "H5_" + pwd;
            },
            //切换验证码
            requestCode() {
                let UrlCode = Url.urlConfig.verfiyIndex,
                    randomStr = this.randomString();
                this.randomStr = randomStr;
                post(UrlCode, {
                    codeToken: randomStr
                }).then((data) => {
                    console.log(data);
                    this.src = "data:img/png;base64," + data.data.code64
                }, () => {
                })
            }
        },
        created() {
            this.requestCode();
        }
    }
</script>

<style scoped lang="less">
    .regWrap {
        width: 100%;
        height: 100%;
        background: #fff url("../assets/img/loginWrap_bg.png") no-repeat center 0;
        background-size: 100% 100%;
        overflow: hidden;

        .regInner {
            width: 622px;
            margin: 210px auto 0;

            .regTxt {
                font-size: 48px;
                font-family: PingFangSC-Semibold;
                font-weight: bold;
                color: #fff;
                margin-bottom: 100px;
            }

            .inpCol {
                position: relative;
                display: flex;
                align-items: center;
                width: 100%;
                height: 90px;
                border-bottom: 1px solid #fff;
                margin: 0 auto;
                padding-left: 6px;
                box-sizing: border-box;

                .icon {
                    width: 36px;
                    height: 36px;

                    img {
                        width: 36px;
                        height: 36px;
                    }

                    margin: 0 30px;


                }

                input {
                    width: 500px;
                    height: 54px;
                    line-height: 54px;
                    background-color: transparent;
                    font-size: 26px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);

                    &::-webkit-input-placeholder {
                        font-size: 26px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(203, 212, 249, 1);
                    }

                    &:-ms-input-placeholder {
                        font-size: 26px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(203, 212, 249, 1);
                    }
                }
            }

            .userPass {
                margin-top: 40px;
            }

            .err {
                border-bottom: 1px solid #DFBD96;

                input {
                    &::-webkit-input-placeholder {
                        color: #DFBD96;
                    }

                    &:-ms-input-placeholder {
                        color: #DFBD96;
                    }
                }
            }

            .vCode {
                display: flex;
                width: 100%;
                height: 90px;
                margin-top: 30px;

                .inp {
                    display: flex;
                    align-items: center;
                    width: 283px;
                    height: 100%;

                    input {
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        background-color: transparent;
                        font-size: 26px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                        border-bottom: 1px solid rgba(247, 247, 251, 1);
                        border-radius: 0;

                        &::-webkit-input-placeholder {
                            font-size: 26px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(203, 212, 249, 1);
                        }

                        &:-ms-input-placeholder {
                            font-size: 26px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(203, 212, 249, 1);
                        }

                    }

                }

                .vCodeImage {
                    width: 204px;
                    height: 90px;
                    margin-left: 50px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .loginBtn {
                width: 395px;
                height: 69px;
                text-align: center;
                line-height: 69px;
                margin: 70px auto 0;
                background: rgba(255, 255, 255, 1);
                box-shadow: 0 12px 12px 0 rgba(98, 125, 241, 0.25);
                border-radius: 34px;
                font-size: 28px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(98, 125, 241, 1);
            }
        }

    }

</style>
